<template>
    <div class="header">
      <div class="header-left">
        <span class="iconfont back-icon">&#xe604;</span>
      </div>
      <div class="header-input">
        <span class="iconfont">&#xe65f;</span>
        输入城市/景点/游玩主题
      </div>
      <router-link to="/city">
        <div class="header-right">
          {{this.city}}
          <span class="iconfont arrow-icon">&#xe625;</span>
        </div>
      </router-link>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
.header {
  display: flex
  line-height: $headerHeight
  background: $bgColor
  color:#fff
}
 .header-left {
   width: 1.80rem
   float:left
 }
   .back-icon {
     font-size:26px
     text-align:center
     padding-left:.1rem
   }
 .header-input {
   flex:1
   height:1.80rem
   line-height:1.80rem
   margin-top:.24rem
   /*margin-left:.20rem*/
   padding-left:.24rem
   background: #fff
   color: #ccc
   border-radius:.3rem
   font-size:.8rem
 }
 .header-right {
   font-size:.8rem
   min-width: 3.24rem//宽度会随字数的增加而变宽
   padding:0 .2rem
   float: right
   text-align:center
   color: #fff
 }
  .arrow-icon {
    margin-left:-.2rem
  }
</style>
